import React, { Component } from 'react';
import "../styles/GoodNav.scss"
import { good_fav, good_unfav, shopcart_add } from '../api';

import { Button } from 'antd-mobile'

import { StarOutline, SendOutline, ShopbagOutline } from "antd-mobile-icons";
import { withRouter } from 'react-router-dom';

class GoodNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: false
        }
    }
    async Collection() {
        if (this.state.flag == false) {
            good_fav({ userid: localStorage.getItem('id'), goodid: this.props.location.state.id }).then(res => {
                console.log(res.data);
                this.setState({
                    flag: true
                })
            })
        } else {
            let res = await good_unfav({ userid: localStorage.getItem('id'), goodid: this.props.location.state.id })
            console.log(res.data);
            this.setState({
                flag: false
            })
        }

    }
    toshopcart(){
        shopcart_add({userid: localStorage.getItem('id'), goodid:this.props.location.state.id}).then(res=>{
            console.log(res.data);
        })
    }
    toshopcart(){
        this.props.history.push('/index/shopcart')
    }
    render() {
        return (
            <div className='goodnav'>
                <ul>
                    <li onClick={() => { this.Collection() }} className={`${this.state.flag ? 'active' : ''}`}>
                        <StarOutline fontSize={26} />
                        收藏
                    </li>
                    <li>
                        <SendOutline fontSize={26} />
                        分享
                    </li>
                    <li onClick={()=>{this.toshopcart()}}>
                        <ShopbagOutline fontSize={26} />
                        购物车
                    </li>
                    <li className="anniu" onClick={() => { this.toshopcart() }}>
                        <Button color="danger" className="button-left">加入购物车</Button>
                        <Button color="warning" className="button-right">立即购买</Button>
                    </li>
                </ul>
            </div>
        );
    }
}

export default withRouter(GoodNav);